<!--  -->
<template>
  <div class="echarts" style="display: none">
    <!-- <el-backtop target=".echarts" :visibility-height="400"></el-backtop> -->
    <div id="map-echart"></div><!-- 中国底图 -->
<!--     <div id="provicemap-echart"></div> -->
    <v-chart :option="tree_option" id="bottomleft-echart"></v-chart><!-- 矩状树形图 -->
    <v-chart :option="line_option" id="top_center"></v-chart><!-- 折线图 -->
    <div class="line">中国人口分布</div><!-- 提示 -->
    <div id="acrossChart"></div><!-- 动态柱状图 -->
    <v-chart :option="sex_option" id="sex_chart"></v-chart><!-- 性别比例图 -->
  </div>
</template>

<script>
import "echarts";
// import axios from "axios";
import ChinaMap from "../mixins/ChinaMap.js"; //中国地图
import ZheXian from "../mixins/ZheXian.js"; //折线图
import JuXin from "../mixins/JuXinTree.js"; //矩形树状图
import TimeBar from "../mixins/TimeBar.js"; //动态柱状图
import Sex from "../mixins/SexChart.js";/* 性别比例图 */
export default {
  data() {
    return {};
  },
  //混入
  mixins: [ChinaMap, ZheXian, JuXin, TimeBar, Sex],
  mounted() {

    //各省男女数
    var gender_data = [
      { name: "北京市", men: 5389072, women: 5266804 },
      { name: "天津市", men: 2634473, women: 2593944 },
      { name: "河北省", men: 11355691, women: 11346545 },
      { name: "山西省", men: 5152643, women: 5067070 },
      { name: "内蒙古自治区", men: 2712686, women: 2603282 },
      { name: "辽宁省", men: 7560804, women: 7592155 },
      { name: "吉林省", men: 3664268, women: 3716538 },
      { name: "黑龙江省", men: 4657780, women: 4710413 },
      { name: "上海市", men: 3782349, women: 3546863 },
      { name: "江苏省", men: 8689674, women: 8600106 },
      { name: "浙江省", men: 6932343, women: 6747680 },
      { name: "安徽省", men: 6485107, women: 6579507 },
      { name: "福建省", men: 4825326, women: 4698906 },
      { name: "江西省", men: 5114547, women: 5162727 },
      { name: "山东省", men: 10238272, women: 10298846 },
      { name: "河南省", men: 12162644, women: 12208763 },
      { name: "湖北省", men: 6217624, women: 6338487 },
      { name: "湖南省", men: 6972175, women: 7000306 },
      { name: "广东省", men: 10384305, women: 10057161 },
      { name: "广西壮族自治区", men: 4645693, women: 4663469 },
      { name: "海南省", men: 1249387, women: 1285092 },
      { name: "重庆市", men: 6311028, women: 6301907 },
      { name: "四川省", men: 10611062, women: 10556015 },
      { name: "贵州省", men: 4158276, women: 4188191 },
      { name: "云南省", men: 5419414, women: 5384454 },
      { name: "西藏自治区", men: 601916, women: 579145 },
      { name: "陕西省", men: 5769343, women: 5761571 },
      { name: "甘肃省", men: 3426757, women: 3408358 },
      { name: "青海省", men: 738871, women: 715153 },
      { name: "宁夏回族自治区", men: 1293875, women: 1283173 },
      { name: "新疆维吾尔自治区", men: 8578767, women: 8186213 },
      { name: "香港特别行政区", men: 202296, women: 169084 },
      { name: "澳门特别行政区", men: 29067, women: 26665 },
      { name: "台湾", men: 102897, women: 54989 },
    ];

    //各省迁移数据
    var qianyi_data = [
      { name: "北京", value1: 127, value2: 255 },
      { name: "天津", value1: 41, value2: 92 },
      { name: "河北", value1: 193, value2: 115 },
      { name: "山西", value1: 113, value2: 52 },
      { name: "内蒙古", value1: 63, value2: 62 },
      { name: "辽宁", value1: 94, value2: 87 },
      { name: "吉林", value1: 83, value2: 49 },
      { name: "黑龙江", value1: 159, value2: 36 },
      { name: "上海", value1: 127, value2: 341 },
      { name: "江苏", value1: 231, value2: 425 },
      { name: "浙江", value1: 211, value2: 669 },
      { name: "安徽", value1: 341, value2: 209 },
      { name: "福建", value1: 116, value2: 212 },
      { name: "江西", value1: 233, value2: 121 },
      { name: "山东", value1: 174, value2: 169 },
      { name: "河南", value1: 462, value2: 75 },
      { name: "湖北", value1: 236, value2: 178 },
      { name: "湖南", value1: 295, value2: 129 },
      { name: "广东", value1: 315, 迁value2入: 875 },
      { name: "广西", value1: 212, value2: 88 },
      { name: "海南", value1: 27, value2: 39 },
      { name: "重庆", value1: 137, value2: 132 },
      { name: "四川", value1: 327, value2: 215 },
      { name: "贵州", value1: 240, value2: 85 },
      { name: "云南", value1: 164, value2: 86 },
      { name: "西藏", value1: 11, value2: 17 },
      { name: "陕西", value1: 122, value2: 83 },
      { name: "甘肃", value1: 135, value2: 35 },
      { name: "青海", value1: 20, value2: 17 },
      { name: "宁夏", value1: 20, value2: 25 },
      { name: "新疆", value1: 54, value2: 112 },
    ];
  },

  methods: {},
};
</script>

<style lang='scss' scoped>
/* 提示框 */
.line {
  position: absolute;
  color: white;
  width: 200px;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.5) !important;
  font-size: 15px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  border-radius: 4px;
  text-align: center;
  top: 100vh;
  right: 50%;
  transform: translateX(49%);
}
//父容器
.echarts {
  height: 200vh;
  position: relative;
  width: 99vw;
  z-index: 1500;
  }
//中国地图
#map-echart {
  position: absolute;
  bottom: 50px;
  left: 10px;
  height: 600px !important;
  width: 55vw !important;
  z-index: 1000000 !important;
}
//矩形树状图
#bottomleft-echart {
  position: absolute;
  top: 49vh;
  right: 48.5%;
  transform: translateX(40%);
  width: 500px !important;
  height: 42vh !important;
  z-index: 1000 !important;
}

//折线图
#top_center {
  position: absolute;
  top: 10px;
  right: 50%;
  transform: translateX(40%);
  width: 600px !important;
  height: 270px !important;
  z-index: 1000 !important;
}

//动态柱状图
#acrossChart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 500px !important;
  height: 660px !important;
  z-index: 1000 !important;
}

//男女堆叠柱状图
#sex_chart {
  width: 400px;
  height: 80vh;
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 1000 !important;
  overflow-y: auto !important;
}
#sex_chart::-webkit-scrollbar {
  width: 0; /* 隐藏滚动条 */
  background: transparent; /* 背景透明 */
}

//省份小地图
#provicemap-echart {
  position: absolute;
  bottom: 50px;
  right: 10px;
  height: 400px !important;
  width: 35vw !important;
  z-index: 1000000 !important;
}
</style>